<template>
    <div class="leftthree">
        <!-- <p>新增确诊TOP10</p> -->
        <div id="three">

        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
import $ from 'jquery'


export default {
    name: "App",
    props: ["width", "height"],
    setup() {
        let myEcharts = echarts;
        onMounted(() => {
            let leftone
            let fn = new Promise((resolve, reject) => {
                //2.jquery中ajax也封装好了jsonp-缺点：1.只能用get方法请求,不能用post 2.还得后台配合你写回调参数
                $.ajax({
                    url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
                    dataType: "jsonp",
                    // jsonp: "callback",//传给后端用来获取jsonp回调函数名的参数名，一般默认是callback。不写也可以
                    // jsonpCallback:"cb",//也可跟后端约定函数名
                    success(res) {
                        // console.log('ajax数据', res);
                        let datalist = JSON.parse(res.data);
                        // console.log(datalist);
                        let left1 = datalist.countryAddConfirmRankList
                        let left2 = datalist.continentStatis
                        let left3 = datalist.foreignList
                        let right1 = datalist.globalDailyHistory
                        let right2 = datalist.countryConfirmWeekCompareRankList
                        let right3 = datalist.importStatis
                        let cont1 = datalist.globalStatis
                        resolve({ left1, left2, left3, right1, right2, right3, cont1 })
                    }
                })
            })

            fn.then(res => {
                // console.log("fn", res);
                leftone = res.left2
                initChart(leftone)
            })
        });
        onUnmounted(() => {
            myEcharts.dispose;
        });
        // 第一个
        function initChart(aa) {
            let chart = myEcharts.init(document.getElementById("three"), "purple-passion");
            // let list = []
            // console.log(aa[0].statis);
            chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [{
                    name: '各州感染人数',
                    type: 'pie',
                    radius: '68%',
                    center: ['50%', '50%'],
                    clockwise: false,
                    data: [{
                        value: aa[0].statis.北美洲,
                        name: '北美洲'
                    }, {
                        value: aa[0].statis.欧洲,
                        name: '欧洲'
                    }],
                    label: {
                        normal: {
                            textStyle: {
                                color: '#999',
                                fontSize: 14,
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 4,
                            // borderColor: '#ffffff',
                        },
                        emphasis: {
                            borderWidth: 0,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }],
                color: [
                    '#1196fe',
                    '#f57474'
                ],
                // backgroundColor: '#fff'
            });
            window.addEventListener(
                "resize",
                function (e) {
                    chart.resize();

                },
                false
            );
        }
        return {
            initChart
        };
    }
};

</script>
<style lang="scss" scoped>
#three {
    width: 520px;
    height: 100%;
    // padding: 20px;
    border: 1px solid skyblue;
}

p {
    color: #fff;
}
</style>